<template>
	<view class="jf-fixed"
		:style="{
			'paddingBottom': data.safeAreaInsets.bottom * data.ratio + 'rpx',
			'background': props.background
		}">
		<slot></slot>
	</view>
	<view class="jf-fixed__block" :style="{'height': data.height + data.safeAreaInsets.bottom * data.ratio + 'rpx'}">
		
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, nextTick, reactive, getCurrentInstance } from "vue"
	
	const { proxy } = getCurrentInstance()
	const props = withDefaults(defineProps<{
		height?: number
		background?: string
	}>(),{
		height: 0,
		background: '#ffffff'
	})
	const data = reactive({
		ratio: 1,
		safeAreaInsets: {
			bottom: 0,
			top: 0
		},
		height: 0
	})
	
	onMounted(() => {
		nextTick(() => {
			uni.getSystemInfo({
				success: ( result ) => {
					data.ratio = 750 / result.screenWidth
					data.safeAreaInsets = result.safeAreaInsets
					const query = uni.createSelectorQuery().in(proxy);
					query.select('.jf-fixed').boundingClientRect((result:any) => {
						data.height = result.height * data.ratio
					}).exec()
				}
			})
		})
	})
</script>

<style lang="scss">
	.jf-fixed{
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
